import React from 'react'
import { ROOTURL } from './AppConfig'
import { GoodsItem, PostItem } from './template'
import { Link } from 'react-router-dom'
export default class Billboard extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      noticereaded:false,
      totalmembers: 0,
      members: [],
      navItems: [],
      goodsItems: [],
      postItems: []
    }
    fetch(ROOTURL + 'homeindex.php').then(
        response => response.json()
    ).then(json => {
        this.setState({
            members: json.result.loginlist,
            totalmembers: json.result.loginlist.length,
            navItems: json.result.fastnav,
            goodsItems: json.result.newgoods,
            postItems: json.result.newtopics
        })
    }).catch(
        error => {alert('网络错误无法加载主页: '+ error.toString())}
    )
  }

    render() {
    const NavItemList = this.state.navItems.map((item) =>
        <div key={item.page} className="navItem">
            <div className={item.icon + " iconfont"}/>
            <div className="navItem-name">{item.title}</div>
        </div>
    )

    const studentList = this.state.members.map((member) =>
        <div key={member.openid} className="avatar-box">
        <div><img src={member.headimg} className="avatar"/></div>
        <div className="avatar-name">{member.nickname}</div>
        </div>
    )

    const goodsList = this.state.goodsItems.map((item) =>
        <div key={item.id} className="goodsItem">
            <GoodsItem { ...item } />
        </div>
        )
        const postItemList = this.state.postItems.map((item) =>
            <div key={item.id}>
                <PostItem {...item} />
            </div>
            )
    return (
    <div>
      <div className='index'>
           {this.state.noticereaded && <div>公告</div>}
            <div className="oldAnnouncement">
                    <Link to="/billboardHistory">查看往期公告</Link>
            </div>
      </div>
      <div>
      <img src=''/>
      </div>
      <div>

      <div className='navBox'>{NavItemList}</div>

      <div>学生
        <div className="student-total">总计:{this.state.totalmembers}</div></div>
        <div className="avatar-collection">{studentList}</div>
      </div>

            <div>
                闲鱼市集
            <div className="goodsBox">{goodsList}</div>
      </div>
            <div>{postItemList}</div>

    </div>
    )
  }
}

